<template>
	<div class="container">
		<div class="userBox" @click="toLogin" v-if="$store.state.id ==0">
			<img src="../assets/images/avatar_default1.png" />
			<span>登录 / 注册</span>
		</div>
		<div class="userBox" v-else>
			<img src="../assets/images/avatar_default1.png" />
			<span>{{$store.state.username}}</span>
		</div>
		<ul class="mui-table-view mui-table-view-chevron" v-if="$store.state.id !=0">
				<li class="mui-table-view-cell mui-media">
					<a class="mui-navigate-right">
						<img class="mui-media-object mui-pull-left" src="../assets/images/avatar_default1.png">
						<div class="mui-media-body">
							我的订单 
							
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a class="mui-navigate-right" href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="../assets/images/avatar_default1.png">
						<div class="mui-media-body">
							收货地址
							
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a class="mui-navigate-right">
						<img class="mui-media-object mui-pull-left" src="../assets/images/avatar_default1.png">
						<div class="mui-media-body" @click="logout">
							退出登录
							
						</div>
					</a>
				</li>
			</ul>
	</div>
</template>

<script>
export default{
	methods:{
		toLogin(){
			this.$router.push('/user/login')
		},
		logout(){
			this.$http.get('logout')
			// this.$store.state.id = 0
			// this.$store.state.username = ''
			this.$store.commit('delUser')
		}
	}
}
</script>

<style>
.container{
	padding:10px;
	background: #FFF;
}
.userBox{
	height:120px;
	background: linear-gradient(to bottom,#2982df, #97c8e8);
	display: flex;
	flex-direction: row;
}
.userBox img {
	/* border: 1px solid #000000; */
	width:95px;
	height:95px;
	margin-top:12px;
	margin-left:15px;
}
.userBox span{
	/* border: 1px solid #f00; */
	line-height:120px;
	margin-left:8px;
	font-size:18px;
	color:#FFF;
}
.mui-media-body{
	line-height:64px;
	text-align: left;
}
</style>
